前兩天練習了 getBy** 系列，取得單一 DOM node。
若要一次取得多個 DOM nodes，我們可以快速使用以下表格直接舉一反八：

RTL Queries** 統整表

• Priority Query Order: 依據使用者操作情境，作為使用 queries 方法的優先順序建議。
• 如果有特定條件取得指定 DOM node，可以使用上述方法的第二個參數做自定義。

getAllBy**

• 如果有符合條件的 DOM node，返回 array。
• 如果沒有符合條件，返回 Error。

以 getAllByRole 為例：我的 component 有一個列表內容。

export default function Hobbies({hobbies}: {hobbies: string[]}){
    return(
        <ul>
            {hobbies.map(item => (
                <li key={item}>{item}</li>
            ))}
        </ul>
    )
}

撰寫測試：

import { render, screen } from "@testing-library/react";
import Hobbies from "./hobbies";

describe("Hobbies", () => {
    // 檢查 <ul> 單一節點
    test("Render List correctlly!", () => {
        const hobbies = ["Sleeping", "Cooking", "Eating"];
        render(<Hobbies hobbies={hobbies}/>);

        const listEl = screen.getByRole("list");
        expect(listEl).toBeInTheDocument();
    })

    // 檢查 <li> 多個節點
    test("Render Listitems correctlly!", () => {
        const hobbies = ["Sleeping", "Cooking", "Eating"];
        render(<Hobbies hobbies={hobbies}/>);

        const listItemElements = screen.getAllByRole("listitem");
        expect(listItemElements).toHaveLength(hobbies.length);
    })
})

測試結果：
PASS src/components/hobbies/hobbies.test.tsx
Hobbies
✓ Render List correctlly! (28 ms)
✓ Render Listitems correctlly! (9 ms)

Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 0.448 s, estimated 1 s

參考資源：

• React Testing Tutorial - 28 - Query Multiple Elements